<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="loginHtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>便民药店系统</title>
    <meta http-equiv="x-ua-compatible" content="IE=10,9,8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-title" content="便民药店系统" />
    <link rel="apple-touch-icon-precomposed" href="images/i/edu.png">
    <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="static/js/LayuiCMS2.0/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="static/js/LayuiCMS2.0/css/public.css" media="all" />
	
	<script type="text/javascript" src="static/js/LayuiCMS2.0/layui/layui.js"></script>
	<script type="text/javascript" src="static/js/LayuiCMS2.0/js/cache.js"></script>
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/jquery.base64.js"></script>

    <style type="text/css">
        .large-header {
            position: relative;
            width: 100%;
            background: #333;
            overflow: hidden;
            background-size: cover;
            background-position: center center;
            z-index: 1;
        }
    </style>

	<script type="text/javascript">
	layui.use(['form','layer','jquery'],function(){
	    var form = layui.form,
	        layer = parent.layer === undefined ? layui.layer : top.layer
	        $ = layui.jquery;
	
	    $(".loginBody .seraph").click(function(){
	        layer.msg("不支持关联登录，请联系管理员开通账号！",{
	            time:5000
	        });
	    });
	    
	    if("${errinfo}" != ""){
			layer.msg("用户名或密码错误！",{
	            time:5000
	        });
		}
	
	    //登录按钮
		//登录按钮
		form.on("submit(login)",function(data){
			$(this).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");

			var username =$("#usernameId").val();
			var password =$("#passwordId").val();

			$("input[name='username']").val(username);
			$("input[name='password']").val(password);

			setTimeout(function(){
				$("#layui-form").submit();
			},1000);
			return false;
		});

	    //表单输入效果
	    $(".loginBody .input-item").click(function(e){
	        e.stopPropagation();
	        $(this).addClass("layui-input-focus").find(".layui-input").focus();
	    });
	    $(".loginBody .layui-form-item .layui-input").focus(function(){
	        $(this).parent().addClass("layui-input-focus");
	    });
	    $(".loginBody .layui-form-item .layui-input").blur(function(){
	        $(this).parent().removeClass("layui-input-focus");
	        if($(this).val() != ''){
	            $(this).parent().addClass("layui-input-active");
	        }else{
	            $(this).parent().removeClass("layui-input-active");
	        }
	    });
	});
	</script>
  </head>
  
  <body class="loginBody" id="large-header">
    <div style="font-family: 微软雅黑; font-size: 50px; color: white; padding-left: 20px; padding-top: 20px;">便民药店管理系统</div>
    <canvas id="demo-canvas"></canvas>
	<form class="layui-form" id="layui-form" action="${pageContext.request.contextPath}/admin/userLogin" method="post">
		<div class="login_face" style="visibility: hidden; height: 60px;"></div>
		<div style="text-align: center; padding-bottom: 20px; font-size: 28px; color: white;">欢迎登陆</div>
		<div class="layui-form-item input-item">
			<label for="usernameId">用户名</label>
			<input type="text" placeholder="请输入用户名" id="usernameId" name="usernameId" value="" class="layui-input" lay-verify="required">
			<input type="hidden" name="username"/>
		</div>
		<div class="layui-form-item input-item">
			<label for="passwordId">密码</label>
			<input type="password" placeholder="请输入密码" id="passwordId" name="passwordId" value="" class="layui-input" lay-verify="required">
			<input type="hidden" name="password"/>
		</div>
		<div class="layui-form-item">
			<button class="layui-btn layui-block layui-btn-normal" id="lay-submit" lay-filter="login" lay-submit>登录</button>
		</div>
		<div class="layui-form-item input-item" style="text-align:center">
			<span style="color: red">${errorMsg}</span>
		</div>
		<div class="layui-form-item layui-row">
			<a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
			<a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
			<a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
		</div>
	</form>

    <script type="text/javascript" src="static/js/TweenLite.min.js"></script>
    <script type="text/javascript" src="static/js/EasePack.min.js"></script>
    <script type="text/javascript" src="static/js/SparkleStars.js"></script>
  </body>
</html>
